<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>顾客购物</title>
<style>
  .layui-table-cell{
      display:table-cell;
      vertical-align: middle;
  }
</style>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css" /> 
<script src="../echartsjs/echarts.min.js"></script>
</head>
<body>
<table id="tb" lay-filter="tbf"></table>
<div id="main" style="width: 1000px;height:400px;"></div>
<script id="barDemo">
	<div class="layui-btn-container" > 
		<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit" >购物详细</button>
	</div>
</script>
<script type="text/javascript">
layui.use('table',function(){
	var  table=layui.table;
	var laypage = layui.laypage;
	table.render({
		elem:"#tb", 
		url:"../clientshop",  
		page:{
			 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
        ,curr: 1 //设定初始在第 5 页
        ,groups: 3//只显示 1 个连续页码
        ,first: false //不显示首页
        ,last:  false
		},
		limit:6,
		limits:[6,7,8,9,10,12],
		request:{
			pageName:'page',
			limitName:'pageSize'
		},
		cols:[[
			{field:'cid',title:"顾客编号", sort: true},
			{field:'client',title:"顾客名称", sort: true},
			{field:'orders',title:"下单总量",sort:true,},  
			{field:'tool',title:"操作",align:"center",toolbar:"#barDemo"}
		]] 
	});
	table.on('tool(tbf)',function(obj){
		var data = obj.data; 
		console.log(obj);
		if (obj.event === 'edit') {
			layer.confirm("确认修改吗",{
				icon:0,
				title:'小贴士',
				offset:'150px'
			},function(index){
				alert("成功了");
			})
			showlayer();
			loadDatatoForm("formInfo", data);
		} 
	});
})
</script>
<script type="text/javascript">
   /*  var myChart = echarts.init(document.getElementById('main'));
     // 显示标题，图例和空的坐标轴
     myChart.setOption({
         title: {
             text: '下单总数占比',
             x:'center'
         },
         tooltip: {
        	 trigger: 'item',
             formatter: "{a} <br/>{b} : {c} ({d}%)"
         },
         legend: {
        	 type: 'scroll',
             orient: 'vertical',
             right: 10,
             top: 20,
             bottom: 20,
             data: data.client,

             selected: data.orders
         },
         series: [{
             name: '姓名',
             type: 'pie',
             radius : '55%',
             center: ['40%', '50%'],
             data:data.orders,
             itemStyle: {
                 emphasis: {
                     shadowBlur: 10,
                     shadowOffsetX: 0,
                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
             }
         }]
     });
      
     myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
      
     var clients=[];    //类别数组（实际用来盛放X轴坐标值）
     var orders=[];    //销量数组（实际用来盛放Y坐标值）
      
     $.ajax({
     type : "post",
     async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
     url : "../clientshop",    //请求发送到TestServlet处
     data : {},
     dataType : "json",        //返回数据形式为json
     success : function(result) {
         //请求成功时执行该函数内容，result即为服务器返回的json对象
         if (result) { 
        	 var result=result.total; 
                for(var i=0;i<result.length;i++){      
                	clients.push(result[i].client);    //挨个取出类别并填入类别数组
                 }
                for(var i=0;i<result.length;i++){      
                	orders.push(result[i].orders);    //挨个取出销量并填入销量数组
                  }
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    xAxis: {
                        data: clients
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '下单数',
                        data: orders
                    }]
                });
                 
         }
      
    },
     error : function(errorMsg) {
         //请求失败时执行该函数
     alert("图表请求数据失败!");
     myChart.hideLoading();
     } */
     var echartsPie = echarts.init(document.getElementById('main'));  
     
     // $.get('js/data.json').done(function (data) {
         $.post("../clientshop", function(datas) {
          //alert(datas);
          /* console.log(datas.total); */
          /* var data= $.parseJSON(datas.total);  */   //将传递过来的json字符串转化为对象
          var data=datas.total;
          /* alert(data[0].client+data[0].orders); */
          var servicedata=[];
          for(var i=0;i<data.length;i++){
              var obj=new Object();
              obj.name=data[i].client; 
              obj.value=data[i].orders;
              servicedata[i]=obj;
              
          }
         // alert(servicedata);
        
         echartsPie.setOption({
             title : {  
                 text: '顾客下单数',  
                 subtext: '饼图',  
                 x:'center'  
             },  
             tooltip : {  
                 trigger: 'item',  
                 formatter: "{b} <br/>下单数为{c} : 占比{d} %"      //a 系列名称，b 数据项名称，c 数值，d 百分比
             },  
             legend: {  
                 orient : 'vertical',  
                 x : 'left',  
                 data:data.name  
             },
             toolbox: {  
                 show : true,  
                 feature : {  
                     mark : {show: true},  
                     dataView : {show: true, readOnly: false},  
                     magicType : {  
                         show: true,   
                         type: ['pie', 'funnel'],  
                         option: {  
                             funnel: {  
                                 x: '25%',  
                                 width: '50%',  
                                 funnelAlign: 'left',  
                                 max: 1548  
                             }  
                         }  
                     },  
                     restore : {show: true},  
                     saveAsImage : {show: true}  
                 }  
             },  
             calculable : true,  
             series : [  
                 {  
                     name:'点击量',  
                     type:'pie',  
                     radius : '55%',//饼图的半径大小  
                     center: ['50%', '60%'],//饼图的位置  
                     data:servicedata
                 }  
             ]    
         })
 })
</script>
</body>
</html>